<!-- 弹窗 详情 -->
<script lang="tsx" setup>
import { ElDatePicker } from 'element-plus';

import FileUpload from '@/components/file-system/file-upload.vue';
import type { FormDescChild } from '@/components/form-desc/form-desc.vue';
import { getEnumOptionsField, RISK_HAZARDS_LEVEL_OPTIONS } from '@/config/enum-options';
import type { components } from '@/genapi/wh';
import { whManagerBsTbRiskHazardsHandleHandleUsingPost } from '@/genapi/wh';
import { useAsync } from '@/hooks/use-async';

import { injectState } from '../state';

defineOptions({ name: 'DetailDialog' });

const { page } = injectState()!;
const dialogRef = shallowRef<InstanceType<GlobalComponents['PromiseDialog']>>();
const formDescRef = shallowRef<InstanceType<GlobalComponents['FormDesc']>>();

const dialogType = ref<'edit' | 'detail' | string>();

const titleMap: Record<string, string> = {
  edit: '编辑',
  detail: '详情',
};

const beforeClose = async () => {
  if (dialogType.value !== 'detail') {
    await ElMessageBox.confirm('确认关闭？');
  }
};

const trigger = async (type = 'add', value = {} as any) => {
  dialogType.value = type;
  model.value = JSON.parse(JSON.stringify(value)) as any;
  await dialogRef.value?.open();
};

defineExpose({
  trigger,
});

const model = ref<components['schemas']['TbRiskHazardsDTO']>({} as any);

const { execute, isLoading } = useAsync(async () => {
  await formDescRef.value?.formRef?.validate();
  await ElMessageBox.confirm('确认提交？', '提示', {
    type: 'warning',
  });

  const riskHazardsIdList: any = model.value.reportImageList?.map((e) => e?.id) ?? [];
  const handleFileIdList: any = model.value.handleFileList?.map((e) => e?.id) ?? [];
  const handleImageIdList: any = model.value.handleImageList?.map((e) => e?.id) ?? [];
  const data = toRaw({
    ...model.value,
    handleFileIdList,
    riskHazardsIdList,
    handleImageIdList,
  });

  await whManagerBsTbRiskHazardsHandleHandleUsingPost({
    data,
  });
  ElMessage.success('提交成功');
  page.execute();
  dialogRef.value?.complete();
});
const children: FormDescChild[] = [
  {
    label: '关联企业',
    prop: 'enterpriseId',
    span: 1,
    formItem: () => model.value.enterpriseId || '-',
    descItem: () => model.value.enterpriseId || '-',
  },
  {
    label: '隐患级别',
    prop: 'level',
    span: 1,
    formItem: () =>
      getEnumOptionsField(RISK_HAZARDS_LEVEL_OPTIONS, 'label', model.value.level) || '-',
    descItem: () =>
      getEnumOptionsField(RISK_HAZARDS_LEVEL_OPTIONS, 'label', model.value.level) || '-',
  },
  {
    label: '上报时间',
    prop: 'reportTime',
    span: 1,
    formItem: () => model.value.reportTime || '-',
    descItem: () => model.value.reportTime || '-',
  },
  {
    label: '整改期限',
    prop: 'handlePlanStartDate',
    span: 1,
    formItem: () =>
      `${model.value.handlePlanStartDate || '-'}--${model.value.handlePlanEndDate || '-'}`,
    descItem: () =>
      `${model.value.handlePlanStartDate || '-'}--${model.value.handlePlanEndDate || '-'}`,
  },
  {
    label: '隐患描述',
    prop: 'description',
    span: 1,
    formItem: () => model.value.description || '-',
    descItem: () => model.value.description || '-',
  },
  {
    label: '隐患图片',
    prop: 'reportImageList',
    span: 1,
    formItem: () => (
      <FileUpload
        class="w-100%!"
        v-model={model.value.reportImageList}
        disabled
        list-type="picture-card"
      ></FileUpload>
    ),
    descItem: () => (
      <FileUpload
        class="w-100%!"
        v-model={model.value.reportImageList}
        disabled
        list-type="picture-card"
      ></FileUpload>
    ),
  },
  {
    span: 2,
    formItem: () => <span>整改情况</span>,
    descItem: () => <span>整改情况</span>,
  },
  {
    label: '负责人员',
    prop: 'masterName',
    // rule: [{ required: true, message: '请输入负责人员', trigger: 'blur' }],
    span: 1,
    formItem: () => (
      <ElInput v-model={model.value.masterName} clearable placeholder="请输入负责人员" />
    ),
    descItem: () => `${model.value.masterName ?? '-'}处`,
  },
  {
    label: '负责人联系电话',
    prop: 'masterPhone',
    // rule: [{ required: true, message: '请输入负责人联系电话', trigger: 'blur' }],
    span: 1,
    formItem: () => (
      <ElInput v-model={model.value.masterPhone} clearable placeholder="请输入负责人联系电话" />
    ),
    descItem: () => model.value.masterPhone || '-',
  },
  {
    label: '投入资金',
    prop: 'spendAmount',
    // rule: [{ required: true, message: '请输入投入资金', trigger: 'blur' }],
    span: 1,
    formItem: () => (
      <div class="relative w-100%!">
        <El-InputNumber
          class="w-100%!"
          v-model={model.value.spendAmount}
          controls={false}
          clearable
          placeholder="请输入投入资金"
        ></El-InputNumber>
        <span class="absolute right-10px">元</span>
      </div>
    ),
    descItem: () => `${model.value.spendAmount || '-'}元`,
  },
  {
    label: '完成时间',
    prop: 'handleRealDate',
    // rule: [{ required: true, message: '请输入完成时间', trigger: 'blur' }],
    span: 1,
    formItem: () => (
      <ElDatePicker
        type="date"
        class="w-100%!"
        valueFormat="YYYY-MM-DD"
        v-model={model.value.handleRealDate}
        clearable
        placeholder="请输入完成时间"
      />
    ),
    descItem: () => model.value.handleRealDate || '-',
  },
  {
    label: '整改措施',
    prop: 'handleMethod',
    // rule: [{ required: true, message: '请输入整改措施', trigger: 'blur' }],
    span: 2,
    formItem: () => (
      <el-input
        v-model={model.value.handleMethod}
        clearable
        placeholder="请输入整改措施"
        type="textarea"
        rows={4}
      />
    ),
    descItem: () => model.value.handleMethod || '-',
  },
  {
    label: '整改附件',
    prop: 'handleFileList',
    // rule: [{ required: true, message: '请输入整改附件', trigger: 'blur' }],
    span: 2,
    formItem: () => (
      <FileUpload class="w-100%!" v-model={model.value.handleFileList} disabled>
        <el-button type="primary" icon={() => <el-icon class="i-custom:add" />}>
          上传附件
          <div class="123"></div>
        </el-button>
      </FileUpload>
    ),
    descItem: () => (
      <FileUpload class="w-100%!" v-model={model.value.handleFileList} disabled></FileUpload>
    ),
  },
  {
    label: '整改图片',
    prop: 'handleImageList',
    // rule: [{ required: true, message: '请输入整改图片', trigger: 'blur' }],
    span: 2,
    formItem: () => (
      <FileUpload class="w-100%!" v-model={model.value.handleImageList} list-type="picture-card">
        <el-icon class="i-custom:add"></el-icon>
      </FileUpload>
    ),
    descItem: () => (
      <FileUpload
        class="w-100%!"
        v-model={model.value.handleImageList}
        list-type="picture-card"
        disabled
      >
        <el-icon class="i-custom:add"></el-icon>
      </FileUpload>
    ),
  },
];
</script>

<template>
  <PromiseDialog
    ref="dialogRef"
    :title="titleMap[dialogType!]"
    :before-close="beforeClose"
    w="707px!"
  >
    <el-scrollbar h="600px!" m="r--20px" p="r-20px">
      <FormDesc
        ref="formDescRef"
        :type="dialogType === 'detail' ? 'desc' : 'form'"
        form-class="gap-x-20px"
        :model="model"
        :children="children"
        :column="2"
      />
    </el-scrollbar>
    <template v-if="dialogType !== 'detail'" #footer>
      <el-button @click="dialogRef?.close()">取消</el-button>
      <el-button type="primary" :is-loading="isLoading" @click="execute()">确认</el-button>
    </template>
  </PromiseDialog>
</template>
